<template>
	<div>
		<div class="product-window" style="z-index:100" :class="attr.cartAttr === true ? 'on' : ''">
			<div class="textpic acea-row row-between-wrapper">
				<div class="pictrue">
					<img :src="present.image" class="image" @click="previewImg(present.image)" />
				</div>
				<div class="text">
					<div class="line3">{{ present.storeName }}</div>
					<div class="money font-color-red">
						￥
						<span class="num">{{ present.price }}</span>
						<!-- <span class="stock">库存: {{ present.stock }}</span> -->
					</div>
				</div>
				<div class="iconfont icon-guanbi" @click="closeAttr"
					style="width: 40px;height: 40px;text-align: center;line-height: 40px;"></div>
			</div>
			<div class="productWinList">
				<div class="item" v-for="(item, indexw) in attr.productAttr" :key="indexw">
					<div class="title">{{ item.attrName||'' }}</div>
					<div class="listn acea-row row-middle">
						<div class="itemn" :class="{ 'selected': item.index === indexn,'disable':itemn.check}"
							v-for="(itemn, indexn) in item.attrValue" v-if="item.attrValue"
							@click="tapAttr(indexw, indexn,itemn.check)" :key="indexn">{{ itemn.attr }}
						</div>
						<div v-if="item.sku" class="itemn">
							{{item.sku}}
						</div>
					</div>
				</div>
			</div>
			<div class="cart">
				<div class="title">数量</div>
				<div class="carnum acea-row row-left">
					<div class="item reduce" :class="cartNum <= 1 ? 'on' : ''" @click="CartNumDes">-</div>
					<div class="item num">{{ cartNum }}</div>
					<div class="item plus on" v-if="receiptGoods == 1">+</div>
					<div v-if="receiptGoods == 0" class="item plus"
						@click="CartNumAdd">+</div>
				</div>
			</div>
			<div class="product-window_bottom">
				<button v-if="userInfo.phone" @tap="presentType" class="button">{{present.type}}</button>
				<button open-type="getPhoneNumber|agreePrivacyAuthorization" @tap.stop @getphonenumber.stop="getPhoneNumber" class="button"
					v-else>
					<span>{{present.type}}</span>
				</button>
			</div>
		</div>

		<div class="mask" @touchmove.prevent v-if="attr.cartAttr" @click="closeAttr"></div>
	</div>
</template>
<script>
	import { getUser } from "@/api/user";
	import {
			updatePhoneNumber
		} from "@/utils";
	import store from "@/store";
	export default {
		name: "ProductWindow",
		props: {
			attr: {
				type: Object,
				default: () => {}
			},
			cartNum: {
				type: String,
				default: () => 1
			},
			receiptGoods: {
				type: String,
				default: () => ''
			},
			productValue: {
				type: Array,
				default: () => []
			},
			present: {
				type: Object,
				default: () => {}
			}
		},
		data: function() {
			return {
				indexw: -1,
				indexn: -1,
				userInfo: {}
			};
		},
		watch: {
			attr() {
				// console.log("attr()-------变了")
			}
		},
		mounted: function() {
			console.log(this.attr)
			getUser().then((res) => {
				this.userInfo = res.data;
			});
		},
		onUnload() {
			this.attr = {}
		},
		methods: {
			presentType() {
				this.$emit("presentType", this.present.type);
			},
			closeAttr: function() {
				this.$emit("changeFun", {
					action: "changeattr",
					value: false
				});
			},
			CartNumDes: function() {
				this.$emit("changeFun", {
					action: "ChangeCartNum",
					value: false
				});
			},
			CartNumAdd: function() {
				this.$emit("changeFun", {
					action: "ChangeCartNum",
					value: 1
				});
			},
			tapAttr(indexw, indexn, check) {
				if (check) {
					return
				}
				console.log(indexw, indexn, "------------------------tapAttr(indexw, indexn)");
				this.indexw = indexw;
				this.indexn = indexn;
				if (this.attr.productAttr[indexw].index == indexn) {
					this.$emit("currentClick", {
						indexw: indexw,
						indexn: -1
					});
				} else {
					this.$emit("currentClick", {
						indexw: indexw,
						indexn: indexn
					});
				}
			},

			//预览选择的图片
			previewImg: function(e) {
				console.log("预览的图片信息", e)
				var imgUrl = e; //获取当前点击的图片
				wx.previewImage({
					current: imgUrl, //当前图片地址
					// urls: imgArr,  //所有要预览的图片的地址集合数组形式
					urls: [imgUrl], //一张图写法
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			// 获取手机号
			getPhoneNumber(e) {
				wx.showLoading({
					title: "授权中...", //提示的内容,
				});
				this.authPhoneShow = false;
				if (e.mp.detail.errMsg == "getPhoneNumber:ok") {
					updatePhoneNumber({
						encryptedData: e.mp.detail.encryptedData,
						iv: e.mp.detail.iv,
					}).then(() => {
						getUser().then((res) => {
							this.userInfo = res.data;
							store.commit("UPDATE_USERINFO", res.data);
							wx.hideLoading();
						});
						this.presentType();
					});
				} else {
					wx.hideLoading();
					console.error("拒绝授权");
				}
			},
		}
	};
</script>

<style lang="less" scoped>
	.selected {
		color: #ff563d !important;
		background-color: #FFF2F0 !important;
		border: 2rpx solid #ff563d !important;
	}

	.disable {
		color: #BDBDBD !important;
		background-color: #F7F7F7;
		border: 2rpx dashed #DADADA !important;
	}

	.product-window_bottom {
		height: 150rpx;
		width: 690rpx;
		position: fixed;
		bottom: 0;
		background-color: #ffffff;
		z-index: 100;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 30rpx;

		.button {
			height: 90rpx;
			background-color: #FF563D;
			color: #ffffff;
			font-size: 28rpx;
			width: 690rpx;
			margin: 0;
			padding: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 45rpx;
		}
	}
</style>
